<template>
  <div class="swiper">
    <van-swipe class="swiper-list" :autoplay="3000">
      <template v-for="item in swiperData" :key="item.orderIndex">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <template v-for="(value, key, index) in  swipeGroup" :key="index">
            <!-- todo active为当前滚动数据的索引 -->
            <div class="item" :class="{ active: swiperData[active]?.enumPictureCategory == key }">
              <span class="text"> {{ getName(value[0].title) }}</span>
              <span class="count" v-if="swiperData[active]?.enumPictureCategory == key">
                {{ getCategoryIndex(swiperData[active]) }}/{{ value.length }}
              </span>
            </div>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
const props = defineProps({
  swiperData: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const swipeGroup = {}
// 思路二
for (const item of props.swiperData) {
  /**
   *   第一次enumPictureCategory为2的循环，为undefined走if判断，
   *   enumPictureCategory为2的就在swipeGroup里面存在了
   *   然后enumPictureCategory不是2的走同样操作
   * */
  let valueArray = swipeGroup[item.enumPictureCategory]
  if (!valueArray) {
    valueArray = []
    swipeGroup[item.enumPictureCategory] = valueArray
  }
  valueArray.push(item)
}
// 思路一
// for (const item of props.swiperData) {
//   swipeGroup[item.enumPictureCategory] = [] //2[],3[],9[]
// }
// for (const item of props.swiperData) {
//   const valueArray = swipeGroup[item.enumPictureCategory]  //每次循环将匹配swipeGroup的key，将value的地址赋值给valueArray
//   console.log(valueArray);
//   valueArray.push(item)
// }

// 定义转换数据的方法
const nameReg = /【(.*?)】/i
const getName = (name) => {
  // return name.replace("：", "").replace('【', "").replace("】", "")  
  const results = nameReg.exec(name)
  return results[1]
}
const getCategoryIndex = (item) => {
  const valueArray = swipeGroup[item.enumPictureCategory]
  return valueArray.findIndex(data => data === item) + 1
}
</script>

<style lang="less" scoped>
.swiper {
  .swiper-list {
    .item {
      img {
        width: 100%;
      }
    }

    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;

      font-size: 12px;
      background: rgba(0, 0, 0, 1);
      display: flex;

      .item {
        margin: 0 3px;
        color: #fff;

        &.active {
          padding: 0 3px;
          border-radius: 3px;
          background-color: #fff;
          color: #333;
        }
      }
    }

  }



}
</style>